<template>
	<view class="">
		<view class="bg-white  ">
			<scroll-view scroll-y="true" class="scroll-Y">

				<uni-card>
					<view class="p-t-b-10">
						<button class="" @click="on_add(0,0,0)" type="primary" size="mini">添加</button>
					</view>

					<uni-table border stripe type="selection" :type="'2'" @selection-change="selectionData">
						<uni-tr>
							<uni-th align="center" style="width: 500rpx;">菜单名称</uni-th>
							<uni-th align="center" style="width: 100rpx;">排序</uni-th>
							<uni-th align="center" style="width: 200rpx;">图标</uni-th>
							<uni-th align="center">路径</uni-th>
							<uni-th align="center">状态</uni-th>
							<uni-th align="center">类型</uni-th>
							<uni-th align="center">创建时间</uni-th>
							<uni-th align="center">管理</uni-th>
						</uni-tr>

						<uni-tr v-for="(vo,index) in menu_list" :key="index" v-if="vo.parent_id==0||vo.expand==true"
							:style="vo.parent_id > 0 ? 'background-color: #F5F5F5;' :'' ">
							<uni-td>
								<view class="banmi_flex  a-c m-l-10"
									:class="vo.depth==1?'m-l-10':vo.depth==2?'m-l-20':vo.depth==3?'m-l-30':vo.depth==4?'m-l-40':'' "
									@click="on_tab(index,vo.url)">
									<view class="" v-if="vo.children.length>0" style="margin-top: -2px;">
										<icon-park :type="vo.depth_to==true? 'down': 'right' " theme="outline"
											class="banmi_flex j-c a-c" style="font-size: 18px;" />
									</view>
									<text>{{vo.menu_name}}</text>
								</view>
							</uni-td>
							<uni-td align="center">

								{{vo.order_num}}

							</uni-td>
							<uni-td align="center">
								<view>
									<icon-park v-if="vo.icon" :type="vo.icon" theme="outline" class="banmi_flex j-c a-c"
										style="font-size: 18px;" />
								</view>
							</uni-td>


							<uni-td style="width: 220px;">
								<view class="banmi_flex  " style="width: 220px;
								justify-content: flex-start;
								flex-wrap: wrap;overflow: hidden;lines: 1;text-overflow: ellipsis;">
									{{vo.url}}
								</view>
							</uni-td>
							<uni-td align="center">
								{{vo.is_shows==1? '显示':vo.is_shows==0? '隐藏,' :'' }}
							</uni-td>
							<uni-td align="center">
								{{vo.category==1? '菜单':vo.category==0? '目录' :'按钮' }}
							</uni-td>
							<uni-td align="center">
								<text v-if="vo.create_time">{{vo.create_time|getTime}}</text>
							</uni-td>
							<uni-td style="width: 200px;height: 60px;">
								<view class="banmi_flex  j-c">
									<button @click="on_add(vo.menu_id,1,index)"
										class="f-14 banmi_flex a-c  button-color">
										<icon-park type="edit" theme="outline" class="banmi_flex j-c a-c f-14" />
										<text>编辑</text>
									</button>
									<button @click="on_add(vo.menu_id,2,index)" class="f-14 banmi_flex button-color">
										<icon-park type="add" theme="outline" class="banmi_flex j-c a-c f-14" />
										新增
									</button>
									<button @click="on_del(vo.menu_id,2,index)" class="f-14 banmi_flex button-color">
										<icon-park type="delete-two" theme="outline" class="banmi_flex j-c a-c f-14" />
										删除
									</button>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</uni-card>
			</scroll-view>
		</view>
		<edit ref="component_edit" @confirm="confirm_edit">
		</edit>
	</view>
</template>

<script>
	import {
		buildMenus,
		getParents,
		patTree,
		getSortMenu
	} from '@/components/uni-data-menu/util.js'
	import {
		IconPark
	} from '@icon-park/vue/es/all';

	import edit from './edit.vue';
	export default {
		components: {
			IconPark,
			edit,
		},
		data() {
			return {
				menu_list: [],
				last_page: 0,
				total: 0,
				page: 1,
				name: '',
				uid: '',
				tel: '',
				windowWidth: 0,
				right_icon: 'right',
				right_expand_icon: 'down',
			}
		},
		onLoad() {
			if (navigator.userAgent.indexOf('Mobile') > -1) {
				this.windowWidth = uni.getSystemInfoSync().windowWidth - 20
			} else {
				this.windowWidth = uni.getSystemInfoSync().windowWidth - 240
			}
			this.add_id = 0;
			this.init();
		},
		methods: {
			confirm_edit(find, menu_id) {
				uni.$emit('banmi_login', {
					title: 1,
				});
				if (this.id > 0) {
					this.menu_list[this.index]['menu_name'] = find.menu_name
					this.menu_list[this.index]['icon'] = find.icon
					this.menu_list[this.index]['parent_id'] = find.parent_id
					this.menu_list[this.index]['order_num'] = find.order_num
					this.menu_list[this.index]['url'] = find.url
					this.menu_list[this.index]['perms'] = find.perms
					this.menu_list[this.index]['category'] = find.category
					this.menu_list[this.index]['is_shows'] = find.is_shows
					return
				}
				this.id = menu_id;
				this.init();

			},

			on_del(id, type, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.ajax_del(id, index);
						}
					}
				});
			},
			async ajax_del(id, index) {
				var that = this;
				let requestParams = {
					id: id
				};
				const ret = await this.Banmikeji.Menu_del(requestParams);
				if (ret.status == 200) {
					uni.showToast({
						title: ret.msg,
						icon: 'none'
					})
					location.reload()

					// that.menu_list = that.menu_list.filter(t => t.menu_id != id);
					// that.$forceUpdate()
					return
				}
				// uni.showModal({
				// 	title: '提示',
				// 	content: ret.data.msg,
				// 	confirmText: '知道了',
				// 	showCancel: false,
				// 	success: function(res) {}
				// });


			},
			on_add(id, menu_id, index) {
				this.id = id;
				this.index = index;
				this.$refs.component_edit.init(id, menu_id)

			},
			async init() {
				let requestParams = {
					page: this.page,
				};
				const ret = await this.Banmikeji.menu_menu_index(requestParams);
				var menu_list = ret.data.list;
				this.onqueryload(menu_list);
			},
			onqueryload(data) {
				for (var i = 0; i < data.length; i++) {
					let item = data[i]
					const depth = getParents(data, item.menu_id)

					item.name = (depth ? '　'.repeat(depth) + '--- | ' : '') + item.menu_name
					item.depth = depth;
					item.depth_to = false;
				}
				const menuTree = getSortMenu(data)
				const sortMenus = []
				patTree(menuTree, sortMenus)
				data.length = 0;
				data.push(...sortMenus)
				this.menu_list = data //仅导出当前页
				if (this.add_id > 0) {
					for (var i = 0; i < this.menu_list.length; i++) {
						if (this.menu_list[i]['menu_id'] == this.add_id) {
							var parent_id = this.menu_list[i]['parent_id']
							this.menu_selected(parent_id);
						}
					}
				}
			},
			menu_selected(parent_id) {
				for (var i = 0; i < this.menu_list.length; i++) {
					if (parent_id == this.menu_list[i]['menu_id']) {
						var parent_ids = this.menu_list[i]['parent_id']
						this.menu_list[i]['depth_to'] = true;
						if (parent_ids > 0) {
							this.menu_selected(parent_ids);
						}
					}
					if (parent_id == this.menu_list[i]['parent_id']) {
						this.menu_list[i]['expand'] = true;
					}

				}
			},
			data_processing(menu_list, menu_list1) {
				var that = this;
				var top_id = 0;
				var menu_id = 0
				var find = {};
				for (var i = 0; i < menu_list1.length; i++) {
					if (menu_list1[i]['list'].length > 0) {
						for (var k = 0; k < menu_list1[i]['list'].length; k++) {
							menu_list1[i]['list'][k]['list'] = [];
							if (menu_list1[i]['list'][k]['url'] == this.route_path) {
								top_id = menu_list1[i]['parent_id']
							}
							menu_list.splice(i + 1, 0, menu_list1[i]['list'][k]);
						}
					}
				}
				this.users = menu_list;


			},
			on_tab(index, url) {
				var num = this.menu_list[index]['children'].length
				var id = this.menu_list[index]['menu_id'];
				if (num == 0) { //没有二级列表 
					return
				}
				var parent_id = this.menu_list[index]['menu_id']; //我的id
				var expand = this.menu_list[index]['expand'];
				var menu_id = this.menu_list[index]['parent_id']; //我的上级
				var depth = this.menu_list[index]['depth']; //层级
				this.menu_list[index]['depth_to'] = !this.menu_list[index]['depth_to'];
				this.menu_list.forEach(function(item, index, arr) {
					if (item['expand'] == true) { //已展开，闭合
						if (parent_id != item['menu_id'] && item['parent_id'] != menu_id && depth < 2) {
							item['expand'] = false;
						} else {
							if (item['parent_id'] == parent_id) {
								item['expand'] = false;
							}
						}
					} else {
						item['expand'] = item['parent_id'] == parent_id ? true : false;
					}

					if (menu_id == 0 && menu_id != item['menu_id'] && parent_id != item['menu_id']) {
						item['depth_to'] = false;
					}
					if (item['depth_to'] && menu_id > 0) {
						if (menu_id == item['parent_id'] && parent_id != item['menu_id']) {
							item['depth_to'] = false;
						}
					}

					arr[index] = item;
				});

				this.$forceUpdate()
			},

		}
	}
</script>

<style>
	button::after {
		border: none;
		background-color: none;

	}
</style>